import React from "react";

import { Flex } from "antd-mobile";

import styles from "./index.module.scss";

import className from "classname";

import { withRouter } from "react-router-dom";

// 校验 prop-types 
import PropTypes from 'prop-types'

function SearchHeader(props) {
  return (
    <Flex
      className={className(styles.searchBar, {
        [props.className]: !!props.className
      })}
    >
      <Flex className={styles.searchLeft}>
        <div onClick={() => props.history.push("/citylist")}>
          <span>{props.cityName}</span>
          <i className="iconfont icon-arrow"></i>
        </div>
        <div className={styles.searchForm}>
          <i className="iconfont icon-seach"></i>
          <span className={styles.formColor}>请输入小区或地址</span>
        </div>
      </Flex>
      <i
        className="iconfont icon-map"
        onClick={() => props.history.push("/map")}
      ></i>
    </Flex>
  );
}

SearchHeader.propTypes={
  className: PropTypes.string,
  cityName: PropTypes.string.isRequired
}

export default withRouter(SearchHeader);
